<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="test1"></div>

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<!-- jsx转为js -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<script type="text/babel">

    class Login extends React.Component {
        username
        password

        // 现用现取就是非受控组件 // 建议用受控组件
        handleSubmit = (event) => {
            event.preventDefault() // 取消表单的提交
            alert(this.username.value + " " + this.password.value)
        };


        render() {
            return (
                    <div>

                        <form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
                            用户名: <input ref={
                            c => {
                                this.username = c;
                            }
                        } type="text" name="username"/>

                            密码: <input ref={
                            c => {
                                this.password = c;
                            }
                        } type="password" name="password"/>
                            <button>登陆</button>
                        </form>

                    </div>
            )
        }
    }

    ReactDOM.render(<Login/>, document.getElementById("test1"))
</script>
</body>
</html>